<template>
  <span class="music" v-if="isPlay">
    <audio class="videoBox" controls="controls" ref="startvideo" autoplay="true">
      <source src="../../assets/res/bgmusic.mp3" type="video/mp4">
    </audio>
    <img class="video_btn music_img" :style="{'animation-play-state':animat}" @click.stop="startvideo()" :src="isSpin?'https://cdn2.pluslegal.cn/music_on.png':'https://cdn2.pluslegal.cn/music_off.png'" alt="" />
  </span>
</template>
<script>
export default {
  data () {
    return {
      animat: 'running',
      isSpin: true,
      musicPlay: true,
      isPlay: false,
    }
  },
  methods: {
    showPlayer (show) {
      this.isPlay = show
    },
    startvideo () {
      if (this.$refs.startvideo.paused) {
        this.$refs.startvideo.play()
        this.isSpin = true
      } else {
        this.$refs.startvideo.pause()
        this.isSpin = false
      }
    },

    spinSwitch () {
      this.autoPlay = !this.autoPlay;
      this.isSpin = !this.isSpin
      this.animat = this.animat === 'running' ? 'paused' : 'running'
    },
    autoPlay () {
      if (this.isPlay) {
        this.myAuto.play();
        this.palyEnd();
      } else {
        this.myAuto.pause();
        this.palyEnd();
      }
    },
    palyEnd () {
      this.myAuto.addEventListener('ended', () => {
        this.isPlay = false;
      });
    },


  }
}
</script>
<style scoped>
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.music_img {
  z-index: 999;
  position: fixed;
  right: 0.3rem;
  top: 0.5rem;
  width: 0.3rem;
  height: 0.3rem;
  animation: spin 3s infinite linear;
}
.videoBox {
  z-index: -1;
  position: fixed;
  right: 0.3rem;
  top: 0.5rem;
  opacity: 0;
}
</style>